<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入 Bootstrap CSS -->
    {css href="__CSS__/bootstrap.min.css"}
    {css href="__CSS__/style.css"}

    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

<!--核心部分-->
<div class="container pt-5 mt-5">
    <div class="row">
        <div class="col-3" siadebar>
            <button class="btn btn-secondary">用户管理</button>
            <button class="btn btn-secondary">喜好管理</button>
            <button class="btn btn-secondary">书籍管理</button>
            <button class="btn btn-secondary">角色管理</button>
            <button class="btn btn-secondary">权限管理</button>

        </div>
        <div class="col-9" main>

            <!--搜索表单-->
            <form action="{:url('/user')}" class="pb-3">
                <!--搜交到User-->
                <div class="form-row">
                    <div class="col-form-label">
                        <label for="username">用户名：</label>
                    </div>
                    <div class="col-2">
                        <input type="text" id="username" name="username" placeholder="查询的用户名" class="form-control">
                    </div>
                    <div class="col-form-label">
                        <label for="email">邮箱：</label>
                    </div>
                    <div class="col-2">
                        <input type="text" id="email" name="email" placeholder="查询的邮箱" class="form-control">
                    </div>
                    <div class="col-form-label">
                        <label for="gender">性别：</label>
                    </div>
                    <div class="col-auto">
                        <select name="gender" id="gender" class="custom-select">
                            <option selected value="">选择性别：</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-primary">搜索</button>
                        <a href="{:url('/user/create')}" class="btn btn-success">添加用户</a>
                    </div>
                </div>
            </form>


            <table class="table table-bordered">
                <thead class="bg-light">
                <tr>
                    <th class="text-center">Id</th>
                    <th>用户名</th>
                    <th class="text-center">性别</th>
                    <th>邮箱</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name = "list" id = "obj"}
                <tr>
                    <td class="text-center">{$obj.id}</td>
                    <td>{$obj.username}</td>
                    <td class="text-center">{$obj.gender}</td>
                    <td>{$obj.email}</td>
                    <td class="text-center">{$obj.status}</td>
                    <td class="text-center">{$obj.create_time}</td>
                    <td class="text-center">
                        <button class="btn btn-danger btn-sm">删除</button>
                        <button class="btn btn-warning btn-sm">修改</button>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>

            {$list|raw}
        </div>
    </div>
</div>


<!-- 引入 JS 文件 -->
{js href="__JS__/jquery-3.3.1.min.js"}
{js href="__JS__/bootstrap.bundle.min.js"}
</body>
</html>